<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org.
  -->

<div xmlns="http://www.w3.org/1999/html">
  <h2><span id="searchSupplyLineLabel" openlmis-message="label.search.supply.line"></span>
    <a href="#/create" class="pull-right btn btn-primary">
      <span id="supplyLineAddNew" openlmis-message="button.add.new"></span>
    </a>
  </h2>

  <div class="alert alert-success" id="saveSuccessMsgDiv" ng-show="supplyLineId">
    <span id="successMessage" ng-bind="message"></span>.&nbsp;&nbsp;
    <a id="viewHereLink" href="" ng-click="edit(supplyLineId)" openlmis-message="search.viewHere"></a>
  </div>

  <div id="searchControl" class="row-fluid">
    <div class="span5 search-in-category">
      <div class="input-append input-prepend">
        <div class="btn-group">
          <button id='searchOptionButton' class="btn dropdown-toggle">
            <span openlmis-message="selectedSearchOption.name"></span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li ng-repeat="searchOption in searchOptions">
              <a id="searchOption{{$index}}" href="" openlmis-message="searchOption.name"
                 ng-click="selectSearchType(searchOption)"></a>
            </li>
          </ul>
        </div>
        <input id='searchSupplyLine' type="text" class="span5" ng-model="query" maxlength="50"
               ng-keydown="triggerSearch($event)" autocomplete="off"/>
        <button class="btn" ng-click="search(1)">
          <i id='searchIcon' class="icon-search"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="table-container">
    <table id="supplyLineTable" class="table table-striped table-bordered search-list" ng-show="showResults">
      <thead>
      <tr class="gradient-header resultCountHeader">
        <th colspan="5">
          <span ng-switch on="totalItems">
            <h3 id="noResultMessage" ng-switch-when="0" openlmis-message="msg.no.matches|searchedQuery"></h3>
            <h3 id="oneResultMessage" ng-switch-when="1" openlmis-message="msg.one.match|searchedQuery"></h3>
            <h3 id="nResultsMessage" ng-switch-default openlmis-message="msg.many.matches|totalItems|searchedQuery"></h3>
          </span>
          <a id="closeButton" class="close-btn" href="" ng-click="clearSearch()" tabindex="-1"></a>
        </th>
      </tr>
      <tr class="gradient-header" ng-show="supplyLines.length">
        <th id="programHeader" openlmis-message="program.header"></th>
        <th id="facilityHeader" openlmis-message="label.supplying.facility"></th>
        <th id="supervisoryNodeHeader" openlmis-message="header.supervisory.node.name"></th>
        <th id="descriptionHeader" openlmis-message="label.description"></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="supplyLine in supplyLines">
        <td id="program{{$index}}" ng-bind="supplyLine.program.name"></td>
        <td><a id="facility{{$index}}" href="" ng-click="edit(supplyLine.id)"
               ng-bind="supplyLine.supplyingFacility.name"></a></td>
        <td id="supervisoryNode{{$index}}" ng-bind="supplyLine.supervisoryNode.name"></td>
        <td id="description{{$index}}" ng-bind="supplyLine.description"></td>
      </tr>
      </tbody>
    </table>
  </div>

  <pagination total-items="totalItems" page="currentPage" max-size="5" items-per-page="pagination.limit"
              direction-links="false" ng-show="supplyLines.length" class="pagination-sm"></pagination>
</div>